<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/后台管理系统.css">
</head>

<body>
    <header>
        <div class="header-left">
            <div class="logo">后台管理系统</div>
            <span>≡</span>
        </div>
        <div class="header-right">
            <div class="user">当前用户：bootstrap中文</div>
            <span>角色：管理员</span>
        </div>
    </header>
    <main>
        <div class="main-nav">
            <ul>
                <li>
                    <div class="list-left"><span></span><span>后台首页</span></div>
                    <div class="list-right">&gt;</div>
                </li>
                <li>
                    <div class="list-left"><span></span><span>设计元素</span></div>
                    <div class="list-right">&gt;</div>
                </li>
                <li>
                    <div class="list-left"><span></span><span>表单元素</span></div>
                    <div class="list-right">&gt;</div>
                </li>
                <li>
                    <div class="list-left"><span></span><span>示例页面</span></div>
                    <div class="list-right">&gt;</div>
                </li>
                <li>
                    <div class="list-left"><span></span><span>常用列表</span></div>
                    <div class="list-right">&gt;</div>
                </li>
                <li>
                    <div class="list-left"><span></span><span>脚本插件</span></div>
                    <div class="list-right">&gt;</div>
                </li>
                <li>
                    <div class="list-left"><span></span><span>统计图表</span></div>
                    <div class="list-right">&gt;</div>
                </li>
            </ul>
        </div>
        <div class="main-content">
            <div class="main-content-top">
                <div class="left">
                    ☜
                    <span>欢迎首页</span>
                </div>
                <div class="right">
                    ☞
                    <span>页签操作 v </span>
                </div>
            </div>
            <div class="main-content-center">
                <div class="d1">
                    <div class="d-left">
                        <p class="p1">今日收入</p>
                        <p class="p2">1000,000.00</p>
                    </div>
                    <div class="d-right">⚪</div>
                </div>
                <div class="d2">
                    <div class="d-left">
                        <p class="p1">昨日收入</p>
                        <p class="p2">1000,000.00</p>
                    </div>
                    <div class="d-right">⚪</div>
                </div>
                <div class="d3">
                    <div class="d-left">
                        <p class="p1">月度累计收入</p>
                        <p class="p2">200,000.00</p>
                    </div>
                    <div class="d-right">⚪</div>
                </div>
                <div class="d4">
                    <div class="d-left">
                        <p class="p1">年度累计收入</p>
                        <p class="p2">5000,000.00</p>
                    </div>
                    <div class="d-right">⚪</div>
                </div>
            </div>
            <div class="echarts">
                <div class="echarts-left"></div>
                <div class="echarts-right"></div>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>订单号</th>
                        <th>商品名称</th>
                        <th>下单日期</th>
                        <th>状态</th>
                        <th>处理情况</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>#</td>
                        <td>订单号</td>
                        <td>商品名称</td>
                        <td>下单日期</td>
                        <td>状态</td>
                        <td>处理情况</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./js/ajax.js"></script>
<script src="./js/echarts.js"></script>
<script>

    const tbody = document.querySelector('tbody');
    async function render(){
        let res = await ajax('get','./js/table.json',{});
        // console.log(res);
         let str = res.list.map((item)=>{
            return `<tr>
                        <td>${item.id}</td>
                        <td>${item.num}</td>
                        <td>${item.goodname}</td>
                        <td>${item.data}</td>
                        <td><span>${item.state}</span></td>
                        <td><span>${item.handling}</span></td>
                    </tr>`
        }).join('');
        tbody.innerHTML = str;
    }
    render();
    document.querySelector('table').rules = 'rows';

</script>